<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="/UserInfo" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                    <el-menu-item index="/UserInfo">
                        <el-icon><icon-menu /></el-icon>
                        <span>用户列表</span>
                    </el-menu-item>
                    <el-menu-item index="/AttractionsInfo">
                        <el-icon><icon-menu /></el-icon>
                        <span>景点</span>
                    </el-menu-item>
                    <el-menu-item index="/CommentManagementVue">
                        <el-icon><icon-menu /></el-icon>
                        <span>评论管理</span>
                    </el-menu-item>
                    <el-menu-item index="/FeedbackVue">
                        <el-icon><icon-menu /></el-icon>
                        <span>用户反馈</span>
                    </el-menu-item>
                    <el-menu-item index="/Announcement">
                        <el-icon><icon-menu /></el-icon>
                        <!--首页轮播图-->
                        <span>公告管理</span>
                    </el-menu-item>
                </el-menu></el-aside>
            <el-main> <router-view></router-view></el-main>
        </el-container>
    </div>
</template>
  
<script>

export default {
    name: "MenuHome",
    handleOpen (key, keyPath) {
        console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
        console.log(key, keyPath)
    }
}
</script>
<style lang="scss">
.l-aside {
    height: 100%;
}

.el-container {
    height: 100%;
}

.common-layout {
    height: 100%;
}

.el-menu {
    height: 100%;
}
</style>
